<template>
    <fieldset>
        <legend>动态组件</legend>
        <!-- <component :is="cname">展示</component> -->
        <!-- <button class="tab-button">朋友</button>
            <button class="tab-button">歌单</button> -->
        <button
                @click="handleClick(item)"
                :class="['tab-button', { active: active == item.tag }]"
                v-for="item in tabs"
                :key="item.tag"
        >
            {{ item.ch }}
        </button>
        <component :is="active"></component>
    </fieldset>
</template>
<script>
//is属性后面跟上组件的名字

//vue2中可以在任意元素上加上is属性,vue2中可以使用component标签,并且可以加上is属性

//vue3只能在component这个元素上加上is属性

//引入组件

import friends from "./friends.vue";

import toplist from "./toplist";

import playlist from "./playlist";

// vue里面的动态组件通过 is属性来进行切换
export default {
    mounted() {
        console.log(tep组件的mountned被触发了);
    },
    data() {
        return {
            active: "friends",
            cname: "toplist",
            tabs: [
                {
                    tag: "friends",
                    ch: "朋友",
                },
                {
                    tag: "toplist",
                    ch: "排行榜",
                },
                {
                    tag: "playlist",
                    ch: "歌单",
                },
            ],
        };
    },
    methods: {
        handleClick(data) {
            // console.log(data);
            this.active = data.tag;
            console.log(this.active);
        },
    },
    components: {
        friends,
        toplist,
        playlist,
    },
};
</script>
<style>
.tab-button {
    padding: 6px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #f0f0f0;
    margin-bottom: -1px;
    margin-right: -1px;
}

.tab-button:hover {
    background: #e0e0e0;
}

.tab-button.active {
    background: hotpink;
}

.tab {
    border: 1px solid #ccc;
    padding: 10px;
}

h1 {
    margin: 0;
}
</style>
